<template>
  <div class="teacherclass" :style="{width:teacherwidth}">
      <div class="teachall">
          <div class="teach_left">
              <div class="teleft_top">
                  <div class="touu" style="text-align:center">
                      <a-avatar :size="128" :src="teacherinfo.image" />
                  </div>
                  <div class="nnnnna">
                      <b>{{teacherinfo.name}}</b>
                      <span :class="[teacherinfo.is_attention_teacher?'bvbv':'anan']" @click="guanz">{{text}}</span>
                  </div>
              </div>
              <div class="teleft_center">
                  <div class="caca">
                      <img src="../../assets/img/teacher_vip.png" alt="">
                      <span>讲师所属部门：{{teacherinfo.department_name}}</span>
                  </div>
                  <div class="lala">
                      <span>领导力</span>
                      <span>培训发展</span>
                      <span>职业技能</span>
                  </div>
                  <p style="overflow-wrap: break-word;">个人简介：{{teacherinfo.desc}}</p>
              </div>
              <div class="teleft_bottom">
                  <div class="asdaaq">
                      <b>总视频数</b>
                      <p>{{mzmz.course_sum_count}}</p>
                  </div>
                  <div class="asdaaq">
                      <b>点击率</b>
                      <p>{{mzmz.click_sum_nums}}</p>
                  </div>
                  <div class="asdaaq">
                      <b>粉丝</b>
                      <p>{{mzmz.fans_nums}}</p>
                  </div>
                  <div class="asdaaq">
                      <b>获赞数</b>
                      <p>{{mzmz.give_like_sum_nums}}</p>
                  </div>
              </div>
          </div>
          <div class="teach_right">
              <div class="teachteach_top">
                <div class="teachteach_left">
                    <h2>讲师课程</h2>
                </div>
                <div class="teachteach_video">
                    <div class="teachteach_one" v-for="item in teachlist" :key="item.id" @click="godetail(item.id)">
                        <div class="teachteach_ooo"> 
                            <img :src="item.image_url" alt="">
                            <p>{{item.name}}</p>
                            <div class="rate_user">
                                <a-rate :default-value="item.grade" disabled  allow-half/>
                                <span>发布人：{{item.teacher_name}}</span>
                            </div>
                            <div class="detail">
                                <div class="bottom_left">
                                    <span>{{item.add_time}}</span>
                                </div>
                                <div class="bottom_right">
                                    <span><a-icon type="eye" />{{item.click_nums}}</span>
                                    <span><a-icon type="like" />{{item.give_like_nums}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="kkkadse" style="text-align:center;margin-bottom:20px">
                    <a-pagination v-model="current" :pageSize="pageSize" @change="currentpage" showQuickJumper  :total="total" show-less-items />
            </div>
          </div>
      </div>
  </div>
</template>

<script>
import axios from '../../utils/axios'
import {getteacherlistData} from '../../api'
export default {
    data() {
        return {
            current:1,
            pageSize:6,
            total:0,
            text:'',
            teacherinfo:{
                id:'',
                name:'',
                image:'',
                desc:'',
                is_attention_teacher:false,
                department_name:'',
            },
            mzmz:{
                fans_nums:0,
                course_sum_count:0,
                give_like_sum_nums:0,
                click_sum_nums:0,
            },
            teachlist:[
                {
                    id:'',
                    department_name:'',
                    teacher_name:'',
                    name:'',
                    grade:0,
                    image_url:'',
                    click_nums:'',
                    give_like_nums:'',
                    add_time:'',
                }
            ]
        }
    },
    methods: {
        godetail(id){
            this.$router.push({path:'/videodetail',query:{id:id}})
        },
        getteacherdetail(){
            let id = this.$route.query.id
            let url = `/trains/detail_teachers/${id}/`
            axios.get(url).then(res=>{
                this.teacherinfo = res
                if(this.teacherinfo.is_attention_teacher==true){
                    this.text = '已关注'
                }else{
                    this.text = '关注'
                }
            })
        },
        getteacherasd(){
            let id = this.$route.query.id
            let url = `/trains/teacher_detail_data/${id}/`
            axios.get(url).then(res=>{
                this.mzmz = res
            })
        },
        guanz(){
            let id = this.$route.query.id
            let url = `/trains/click_teacher/${id}/`
            axios.post(url).then(res=>{
                if(res.msg=='关注成功'){
                    this.teacherinfo.is_attention_teacher = true
                    this.text = '已关注'
                    this.$message.success('关注成功')
                }else if(res.msg=='取消关注成功'){
                    this.teacherinfo.is_attention_teacher = false
                    this.text = '关注'
                    this.$message.success('取消关注成功')
                }
            })
        },
        currentpage(val){
            this.current = val
            this.kqejqkeqh()
        },
        kqejqkeqh(){
            let teacher_id = this.$route.query.id
            let page = this.current
            let page_size = this.pageSize
            getteacherlistData(teacher_id,page,page_size).then(res=>{
                this.teachlist = res.results
                this.total = res.count
            })
        }
    },
    mounted(){
        this.getteacherdetail()
        this.getteacherasd()
        this.kqejqkeqh()
    },
    computed:{
        teacherwidth: ()=>{
            if(window.innerWidth>=1200){
                return 1200+'px'
            }else{
                return '100%'
            }
        }
    }
}
</script>

<style lang="less">
.teacherclass{
    margin: 0 auto;
    padding: 30px 0 30px 0;
    .teachall{
        display: flex;
        justify-content: space-between;
        .teach_left{
            width: 20%;
            .teleft_top{
                padding: 5px;
                background: white;
            }
            .nnnnna{
                display: flex;
                justify-content: space-between;
                padding: 5px 10px 10px 10px;
                b{
                    font-size: 25px;
                }
                span{
                    color: white;
                    padding: 5px;
                    letter-spacing: 5px;
                    padding-left: 10px;
                    border-radius: 13px;
                    font-size: 14px;
                    font-weight: bold;
                    display: table;
                    margin-top: 4px;
                    cursor: pointer;
                }
            }
        }
        .teleft_center{
            border-top: 1px solid;
            border-bottom: 1px solid;
            background: white;
            padding: 13px;
            .caca{
                margin-bottom: 20px;
                img{
                    width: 35px;
                }
            }
            .lala{
                display: flex;
                justify-content: space-between;
                padding: 0 10px 15px 10px;
                span{
                    padding: 3px;
                    border-radius: 5px;
                    border: 2px solid #18A862;
                    color: #18A862;
                }
            }
            p{
                margin: 0;
            }
        }
        .teleft_bottom{
            background: white;
            padding: 12px;
            overflow: hidden;
            .asdaaq{
                width: 33%;
                float: left;
            }
        }
    }
    .teach_right{
        width: 74%;
        .teachteach_left{
            h2{
                border-left: 3px solid #18A862;
                padding-left: 8px;
            }
        }
        .teachteach_top{
            .teachteach_video{
                overflow: hidden;
                margin-bottom: 5vh;
                .teachteach_one{
                    width: 32%;
                    float: left;
                    margin: 1vh 1% 1vh 0;
                    .teachteach_ooo{
                        border: 1px solid gainsboro;
                        border-radius: 9px;
                        overflow: hidden;
                        background: white;
                    }
                    img{
                        width: 100%;
                        height: 168px;
                    }
                    p{
                        margin: 0.5vh 0 0.8vh 0;
                        font-size: 1vw;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        padding: 0 5px 0 5px;
                    }
                    .rate_user{
                        display: flex;
                        justify-content: space-between;
                        padding: 0 5px 0 5px;
                        .ant-rate-star:not(:last-child){
                            width: 15px;
                        }
                        span{
                            font-size: 12px;
                            margin-top: 8px;
                        }
                    }
                    .detail{
                        display: flex;
                        justify-content: space-between;
                        padding: 0 5px 5px 5px;
                        .bottom_right{
                            span{
                                margin-left: 5px;
                            }
                        }
                    }
                }
            }
        }
    }
    .bvbv{
        background: gainsboro!important;
    }
    .anan{
         background: #18A862!important;
    }
}
</style>